// 引入 React 库中的 useState 和 useEffect 钩子，用于状态管理和副作用处理
import React, { useState, useEffect } from 'react';
// 引入当前组件的样式文件
import './Mydesign.css';
// 引入上传模态框组件
import UploadModal from '../../components/UploadModal/UploadModal';

// 定义资源项的接口，用于描述每个素材的属性
interface AssetItem {
  // 唯一标识符
  id: string;
  // 素材类型，如 'image'、'video'、'music'
  type: string;
  // 素材的 URL，用于展示
  url: string;
  // 素材的文件名
  name: string;
  // 素材的文件大小，单位为字节
  size: number;
  // 可选的文件对象，用于持久化操作
  file?: File;
}

// 定义资源管理组件
const AssetManager = () => {
  // 定义上传模态框的显示状态，初始为隐藏
  const [uploadVisible, setUploadVisible] = useState(false);
  // 定义存储所有素材的状态，初始为空数组
  const [assets, setAssets] = useState<AssetItem[]>([]);
  // 定义批量管理模式的状态，初始为关闭
  const [batchMode, setBatchMode] = useState(false);
  // 定义当前选中的素材 ID 列表，初始为空数组
  const [selectedIds, setSelectedIds] = useState<string[]>([]);
  // 定义当前激活的标签页状态，初始为 'image'
  const [activeTab, setActiveTab] = useState<'image' | 'video' | 'music'>('image');

  // 从 localStorage 加载素材数据的副作用钩子
  useEffect(() => {
    // 从 localStorage 中获取保存的素材数据
    const savedAssets = localStorage.getItem('assets');
    // 如果存在保存的数据，则解析并设置到 assets 状态中
    if (savedAssets) {
      setAssets(JSON.parse(savedAssets));
    }
  }, []);

  // 将素材数据保存到 localStorage 的副作用钩子
  useEffect(() => {
    // 将 assets 状态的数据转换为 JSON 字符串并保存到 localStorage
    localStorage.setItem('assets', JSON.stringify(assets));
  }, [assets]);

  // 格式化文件大小的工具函数
  const formatSize = (size: number) => {
    // 如果文件大小大于 1MB，转换为 MB 并保留两位小数
    if (size > 1024 * 1024) return (size / 1024 / 1024).toFixed(2) + 'MB';
    // 如果文件大小大于 1KB，转换为 KB 并取整
    if (size > 1024) return (size / 1024).toFixed(0) + 'KB';
    // 否则直接返回字节数
    return size + 'B';
  };

  // 处理文件上传的函数
  const handleUpload = (type: string, files: FileList) => {
    // 将 FileList 转换为数组，并为每个文件生成一个素材对象
    const newAssets: AssetItem[] = Array.from(files).map(file => {
      // 获取文件类型并转换为小写
      const fileType = file.type.toLowerCase();
      // 获取文件名并转换为小写
      const fileName = file.name.toLowerCase();

      // 如果上传的是音乐文件
      if (type === 'music') {
        // 检查文件是否为支持的音频格式
        const isAudio = fileType.includes('audio') ||
          fileName.endsWith('.mp3') ||
          fileName.endsWith('.wav') ||
          fileName.endsWith('.ogg') ||
          fileName.endsWith('.m4a');
        // 如果不是支持的音频格式，弹出提示并返回 null
        if (!isAudio) {
          alert('请上传音频文件（支持 MP3、WAV、OGG、M4A 格式）');
          return null;
        }
      }
      // 如果上传的是视频文件，检查文件类型是否为视频
      if (type === 'video' && !fileType.includes('video')) {
        alert('请上传视频文件');
        return null;
      }
      // 如果上传的是图片文件，检查文件类型是否为图片
      if (type === 'image' && !fileType.includes('image')) {
        alert('请上传图片文件');
        return null;
      }

      // 根据素材类型设置最大文件大小
      const maxSize = type === 'music' ? 10 * 1024 * 1024 : // 10MB for audio
        type === 'video' ? 200 * 1024 * 1024 : // 200MB for video
          20 * 1024 * 1024; // 20MB for images

      // 检查文件大小是否超过限制
      if (file.size > maxSize) {
        alert(`文件大小不能超过${maxSize / 1024 / 1024}MB`);
        return null;
      }

      // 生成素材对象
      return {
        // 生成唯一的 ID
        id: Date.now() + '_' + Math.random(),
        // 素材类型
        type,
        // 生成文件的临时 URL
        url: URL.createObjectURL(file),
        // 文件名
        name: file.name,
        // 文件大小
        size: file.size,
        // 文件对象
        file: file
      };
    }).filter(Boolean) as AssetItem[];

    // 将新的素材对象合并到现有的素材列表中
    setAssets(prev => [...prev, ...newAssets]);
    // 关闭上传模态框
    setUploadVisible(false);
  };

  // 获取所有图片素材的 ID 列表
  const allImageIds = assets.filter(a => a.type === 'image').map(a => a.id);
  // 判断是否全选了图片素材
  const isAllSelected = selectedIds.length === allImageIds.length && allImageIds.length > 0;

  // 全选或取消全选图片素材的函数
  const handleSelectAll = () => {
    // 如果已经全选，则清空选中的 ID 列表
    if (isAllSelected) setSelectedIds([]);
    // 否则选中所有图片素材的 ID
    else setSelectedIds(allImageIds);
  };

  // 单选或取消单选某个素材的函数
  const handleSelectOne = (id: string) => {
    // 如果选中的 ID 列表中已经包含该 ID，则移除该 ID
    // 否则将该 ID 添加到选中的 ID 列表中
    setSelectedIds(prev => prev.includes(id) ? prev.filter(i => i !== id) : [...prev, id]);
  };

  // 处理删除选中素材的函数
  const handleDelete = () => {
    // 过滤掉选中的素材
    setAssets(prev => prev.filter(a => !selectedIds.includes(a.id)));
    // 清空选中的 ID 列表
    setSelectedIds([]);
  };

  // 处理批量管理完成操作的函数
  const handleBatchDone = () => {
    // 关闭批量管理模式
    setBatchMode(false);
    // 清空选中的 ID 列表
    setSelectedIds([]);
  };

  // 定义标签页的配置数组，包含标签的键和显示名称
  const tabList = [
    { key: 'image', label: '图片' },
    { key: 'video', label: '视频' },
    { key: 'music', label: '音乐' },
  ];

  // 获取当前激活标签页对应的素材列表
  const currentAssets = assets.filter(a => a.type === activeTab);

  // 计算所有素材的总大小
  const totalSize = assets.reduce((sum, a) => sum + a.size, 0);
  // 定义存储容量上限为 300MB
  const maxSize = 300 * 1024 * 1024;
  // 计算存储占用百分比，不超过 100%
  const percent = Math.min((totalSize / maxSize) * 100, 100);

  // 渲染媒体内容的函数，根据素材类型渲染不同的媒体元素
  const renderMediaContent = (asset: AssetItem) => {
    switch (asset.type) {
      case 'image':
        // 如果是图片素材，渲染 img 元素
        return <img src={asset.url} alt={asset.name} style={{ maxWidth: '100%', maxHeight: '100%', objectFit: 'cover' }} />;
      case 'video':
        // 如果是视频素材，渲染 video 元素
        return (
          <video
            controls
            style={{ maxWidth: '100%', maxHeight: '100%' }}
            src={asset.url}
          />
        );
      case 'music':
        // 如果是音乐素材，渲染 audio 元素和文件名
        return (
          <div style={{ width: '100%', padding: '10px' }}>
            <audio
              controls
              style={{ width: '100%' }}
              src={asset.url}
            />
            <div style={{ fontSize: '12px', color: '#666', marginTop: '5px', textAlign: 'center' }}>
              {asset.name}
            </div>
          </div>
        );
      default:
        // 其他情况返回 null
        return null;
    }
  };

  // 组件的渲染返回值
  return (
    <div className="asset-manager">
      {/* 顶部导航区 */}
      <div className="nav-bar">
        <div className="nav-tabs">
          {/* 渲染标签页 */}
          {tabList.map(tab => (
            <div
              key={tab.key}
              // 根据当前激活的标签页添加 'active' 类名
              className={`tab${activeTab === tab.key ? ' active' : ''}`}
              // 点击标签页时切换激活状态
              onClick={() => setActiveTab(tab.key as 'image' | 'video' | 'music')}
            >
              {/* 显示标签页的名称 */}
              {tab.label}
            </div>
          ))}
          {/* 二维码标签页，带有 '限免' 标识 */}
          <div className="tab" style={{ position: 'relative' }}>
            二维码
            <span className="tab-limit">限免</span>
          </div>
        </div>
        {/* 顶部右侧操作区 */}
        <div className="top-right-actions">
          <div className="action-btn">查看团队/企业素材</div>
          <div className="action-btn">新建文件夹</div>
        </div>
      </div>

      {/* 主体内容区 */}
      <div className="content-wrapper">
        {/* 左侧筛选区 */}
        <div className="left-filters">
          <div className="filter-section">
            <div className="filter-header">
              {/* 显示当前标签页的名称和素材数量 */}
              <div className="filter-title">全部{tabList.find(t => t.key === activeTab)?.label}({assets.filter(a => a.type === activeTab).length})</div>
              <div className="search-group">查找分组</div>
            </div>
          </div>

          {/* 素材分类区 */}
          <div className="category-section">
            <div className="category active">微信</div>
            <div className="category">团队建设</div>
            <div className="category">企业素材</div>
          </div>
        </div>

        {/* 右侧内容区 */}
        <div className="main-content">
          {/* 存储容量信息栏 */}
          <div className="storage-info">
            <div className="storage-progress">
              {/* 存储进度条，宽度根据占用百分比设置 */}
              <div className="storage-progress-inner" style={{ width: `${percent}%` }}></div>
            </div>
            {/* 显示已使用的存储容量 */}
            <span className="storage-num">{(totalSize / 1024 / 1024).toFixed(2)}M</span>
            {/* 显示存储容量上限 */}
            <span className="storage-unit">/ 300M</span>
            <button className="storage-btn">扩容 &gt;</button>
            {/* 点击按钮显示上传模态框 */}
            <button className="primary-btn" onClick={() => setUploadVisible(true)}>上传素材</button>
            {/* 点击按钮进入批量管理模式 */}
            <button className="secondary-btn" onClick={() => setBatchMode(true)}>批量管理</button>
          </div>

          {/* 批量管理操作栏，仅在批量管理模式下显示 */}
          {batchMode && (
            <div style={{ display: 'flex', alignItems: 'center', gap: 16, marginBottom: 18 }}>
              {/* 全选复选框 */}
              <input type="checkbox" checked={isAllSelected} onChange={handleSelectAll} style={{ width: 18, height: 18 }} />
              <span>全选</span>
              {/* 显示已选中的素材数量 */}
              <span>已选 <span style={{ color: '#1890ff' }}>{selectedIds.length}</span> 个素材</span>
              {/* 删除选中素材的按钮，选中数量为 0 时禁用 */}
              <button onClick={handleDelete} disabled={selectedIds.length === 0} style={{ color: selectedIds.length ? '#f5222d' : '#ccc', background: 'none', border: 'none', cursor: selectedIds.length ? 'pointer' : 'not-allowed' }}>删除</button>
              {/* 移动素材的按钮，当前禁用 */}
              <button disabled style={{ background: '#f5f5f5', color: '#bbb', border: 'none', borderRadius: 4, padding: '4px 16px', cursor: 'not-allowed' }}>移动至...</button>
              <span style={{ flex: 1 }}></span>
              {/* 完成批量管理操作的按钮 */}
              <button onClick={handleBatchDone} style={{ background: 'none', border: 'none', color: '#1890ff', fontWeight: 500, fontSize: 16, cursor: 'pointer' }}>完成</button>
            </div>
          )}

          {/* 主显示区，显示当前标签页的素材 */}
          <div className="asset-display" style={{ display: 'flex', gap: 24, alignItems: 'flex-start', flexWrap: 'wrap', justifyContent: currentAssets.length ? 'flex-start' : 'center' }}>
            {/* 如果当前标签页没有素材，显示空状态 */}
            {currentAssets.length === 0 ? (
              <div className="empty-state">
                <div className="bear-icon">
                  {/* 空状态的小熊图标 */}
                  <svg width="80" height="80" viewBox="0 0 80 80">
                    <path d="M40 15C35 10 25 10 20 15C15 20 15 30 20 35C25 40 35 40 40 35C45 40 55 40 60 35C65 30 65 20 60 15C55 10 45 10 40 15Z" fill="#b3e5fc" />
                    <circle cx="30" cy="30" r="5" fill="#333" />
                    <circle cx="50" cy="30" r="5" fill="#333" />
                    <path d="M35 45Q40 55 45 45" stroke="#333" strokeWidth="2" fill="none" />
                  </svg>
                </div>
                <div className="empty-text">还没有上传{tabList.find(t => t.key === activeTab)?.label}</div>
              </div>
            ) : (
              // 如果有素材，渲染每个素材的卡片
              currentAssets.map(asset => {
                // 判断该素材是否被选中
                const checked = selectedIds.includes(asset.id);
                return (
                  <div key={asset.id} style={{ background: '#fff', borderRadius: 16, boxShadow: '0 2px 8px rgba(0,0,0,0.06)', padding: '0 0 12px 0', width: 200, display: 'flex', flexDirection: 'column', alignItems: 'center', position: 'relative' }}>
                    <div style={{ width: '100%', height: 120, background: 'repeating-conic-gradient(#f3f3f3 0% 25%, #fff 0% 50%) 50% / 20px 20px', borderTopLeftRadius: 16, borderTopRightRadius: 16, overflow: 'hidden', display: 'flex', alignItems: 'center', justifyContent: 'center', position: 'relative' }}>
                      {/* 渲染媒体内容 */}
                      {renderMediaContent(asset)}
                      {/* 批量管理模式下显示单选框 */}
                      {batchMode && (
                        <span onClick={() => handleSelectOne(asset.id)} style={{ position: 'absolute', top: 10, right: 10, width: 24, height: 24, display: 'flex', alignItems: 'center', justifyContent: 'center', background: checked ? '#1890ff' : '#fff', border: '2px solid ' + (checked ? '#1890ff' : '#ccc'), borderRadius: 6, cursor: 'pointer', transition: 'all 0.2s' }}>
                          {/* 选中状态显示勾选图标 */}
                          {checked && (
                            <svg width="16" height="16" viewBox="0 0 16 16"><rect width="16" height="16" rx="4" fill="#1890ff" /><path d="M4 8.5l3 3 5-5" stroke="#fff" strokeWidth="2" fill="none" /></svg>
                          )}
                        </span>
                      )}
                    </div>
                    {/* 显示素材的文件大小 */}
                    <div style={{ marginTop: 8, fontSize: 14, color: '#888' }}>{formatSize(asset.size)}</div>
                  </div>
                );
              })
            )}
          </div>
        </div>
      </div>

      {/* 上传模态框组件 */}
      <UploadModal visible={uploadVisible} onClose={() => setUploadVisible(false)} onUpload={handleUpload} />

      {/* 底部版权信息 */}
      <div className="footer">
        <div className="copyright">
          © 2025 eqxlu.com.All rights reserved 北京中网易企秀科技有限公司
        </div>
        <div className="license">
          电信与信息服务业务经营许可证:京ICP证160037号
          京ICP备1505624号
          京公网安备11010802018300 |
          网信备条110108032561901240019号
        </div>
      </div>
    </div>
  );
};

// 导出组件
export default AssetManager;